<template>
<div class="card">
<el-table v-loading="loading" :data="tableData" style="width: 100%" >
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="讲座编号:">
            <span>{{ props.row.lecture.lecId }}</span>
          </el-form-item>
          <el-form-item label="时长:">
            <span>{{ props.row.lecture.lecHour }}小时</span>
          </el-form-item>
          <el-form-item label="详情介绍:">
            <span>{{ props.row.lecture.lecDetail }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column type="index" width="50"></el-table-column>
    <el-table-column prop="lecture.lecName" label="讲座" align="center">
    </el-table-column>
    <el-table-column prop="lecture.lecAuthor" label="主讲" align="center">
    </el-table-column>
    <el-table-column prop="tickAddress" label="地址" align="center">
    </el-table-column>
    <el-table-column prop="tickDate" label="时间" :formatter="dateFormat" align="center">
    </el-table-column>
    <el-table-column fixed="right" label="操 作" width="120">
      <template slot-scope="scope">
        <el-popover ref="popover{{$index}}" class="aew" placement="top" >
          <p>退选 {{ scope.row.name }} ？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="cancel(scope.$index, tableData)">取消</el-button>
            <el-button type="primary" size="mini" @click="deleteRow(scope.$index, tableData)">确定</el-button>
          </div>
        </el-popover>
        <el-button type="text" size="small" v-popover:popover{{$index}}> 退选</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>
<style scoped>
.aew{
  visibility: hidden;
}
.card{
  position: absolute;
  width: 97%;
  
  height: 50%;
  top: 20px;
  background-color: #fff;
}
</style>

<script>
  export default {
    data() {
      return {      
        loading:true,
        tableData: [],
        User:{}
      }
    },
    created(){
      this.User = JSON.parse(sessionStorage.getItem('BIGDATA_PLATFORM'))
      this.getData()
      setTimeout(() => {
        this.loading = false
      },400)
    },
    methods: {
      dateFormat(row, column) {  
        return new Date(row[column.property]).toLocaleString()
      }, 
      getData(){
        var _this=this
        this.$ajax.post('/api/getMyTickets',_this.User).then(function(response){
          console.log(response.data.data)
          _this.tableData = response.data.data
        }).catch(function(error){console.log(error);}); 
      },
      deleteRow(index, rows) {
        var _this=this
        this.$ajax.post('/api/removeTicketList',rows[index]).then(function(response){
          if(0==response.data.code){
              setTimeout(function () {
                _this.$message({message: response.data.data, type: 'success'});
              }, 500);
          }else if(1==response.data.code){
              _this.$message({message: response.data.msg, type: 'error'});
          }
        }).catch(function(error){console.log(error);}); 
        rows.splice(index, 1);
        document.querySelector("#app").click();
      },
      cancel(index, rows){
        document.querySelector("#app").click();
      }
    }
  }
</script>